<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <div class="wb-videos" :style="styles" ref="swiper">
        <div class="swiper swiper-container" ref="scrollSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item_, index) in lists" :key="index">
              <video-item :item="item_" :compItem="item" :index="index" :isRight="false"></video-item>
            </div>
          </div>
          <div @click.stop v-if="item.commonAttr.paginationType == PAGINATION_TYPE[1].value" :id="item.id + '-pagination'" class="swiper-pagination" :class="getPaginationClass"></div>
          <template v-else-if="item.commonAttr.paginationType == PAGINATION_TYPE[2].value">
            <div @click.stop :id="item.id + '-prev'" class="swiper-button-prev" :style="getSwiperPreStyle"></div>
            <div @click.stop :id="item.id + '-next'" class="swiper-button-next" :style="getSwiperNextStyle"></div>
          </template>
          <template v-else-if="item.commonAttr.paginationType == PAGINATION_TYPE[3].value">
            <div @click.stop :id="item.id + '-pagination'" class="swiper-pagination" :class="getPaginationClass"></div>
            <div @click.stop :id="item.id + '-prev'" class="swiper-button-prev" :style="getSwiperPreStyle"></div>
            <div @click.stop :id="item.id + '-next'" class="swiper-button-next" :style="getSwiperNextStyle"></div>
          </template>
        </div>
      </div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import VideoItem from '@/components/items/video-item.vue'

import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { carousel } from "@/components/js/carousel"
import '@/assets/css/carousel.scss'

export default {
  name: "WbVideos",
  mixins: [utils, commonUtils, carousel],
  setup () {
    return {
      jumpUrl_: "video_"
    };
  },
  components: {
    VideoItem,
    InjectTemplate,
  },
  mounted(){
  },
  computed: {
  },
  methods: {
  },
};
</script>
<style lang="scss">
.wb-videos{
  width: inherit;
  height: inherit;

  img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
